<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('修改审读样本')"/>
    <th:block th:include="include :: datetimepicker-css"/>
    <th:block th:include="include :: bootstrap-select-css"/>
    <th:block th:include="include :: bootstrap-fileinput-css"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-sample-edit" th:object="${rvSample}">
        <input name="id" th:field="*{id}" type="hidden">

        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">样本名称：</label>
                    <div class="col-sm-8">
                        <input type="text" name="name" th:field="*{name}" class="form-control" placeholder="" required>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">样本介质：</label>
                    <div class="col-sm-8">
                        <!--                        <input type="text" name="medium" class="form-control" placeholder="请输入文本">-->
                        <select name="medium" th:with="type=${@dict.getType('review_sample_medium')}"
                                class="selectpicker" data-none-selected-text="请选择" required>
                            <option value="">--请选择--</option>
                            <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                    th:value="${dict.dictValue}" th:field="*{medium}"></option>
                        </select>

                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">出版单位：</label>
                    <div class="col-sm-8">
<!--                        type="hidden"-->
                        <input  type="hidden"  name="publisherId" th:field="*{publisherId}" class="form-control" placeholder="" readonly required>
                        <input type="text" id="publisher" name="publisher" th:field="*{publisher}" class="form-control" placeholder="" required  autocomplete="off">
                        <span class="help-block m-b-none"><i class="fa fa-info-circle"></i>输入出版单位名称，自动补全</span>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">出版期刊：</label>
                    <div id="element" class="col-sm-8">
                        <div class="form-group">
                            <div class="col-sm-5">
                                <select name="journalSuper" class="type form-control "
                                        th:attr="data-value=${rvSample.journalSuper}" data-first-title="请选择" required>
                                    <option value="">请选择</option>
                                </select>
                            </div>
                            <div class="col-sm-7">
                                <select name="journalSub" class="router form-control "
                                        th:attr="data-value=*{journalSub}" data-first-title="请选择" required>
                                    <option value="">请选择</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">缴送时间：</label>
                    <div class="col-sm-8">
                        <div class="input-group date">
                            <input name="deliveryTime" th:value="${#dates.format(rvSample.deliveryTime, 'yyyy-MM-dd')}"
                                   class="form-control" placeholder="yyyy-MM-dd" type="text" required>
                            <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">出版标识：</label>
                    <div class="col-sm-8">
                        <input name="identification" th:field="*{identification}" class="form-control"
                               placeholder="ISBN 邮发代号 内刊号" type="text" required>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="form-group">
                    <label class="col-sm-2 control-label ">样本封面：</label>
                    <div class="col-sm-10">
                        <!--   type="hidden" -->
                        <input type="hidden" th:value="*{cover}" name="cover" readonly required>
                        <div class="file-loading">
                            <input class="form-control file-upload" multiple id="cover" name="file" type="file">
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="form-group">
                    <label class="col-sm-2 control-label"></label>
                    <div class="col-sm-10">
                        <button type="button" class="btn btn-w-m btn-warning" onclick="photograph('cover')">
                            <i class="fa fa-check"></i>拍照
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="form-group">
                    <label class="col-sm-2 control-label">其它说明：</label>
                    <div class="col-sm-10">
                        <textarea name="sampleDesc" maxlength="500" class="form-control" placeholder="输入说明文字内容"
                                  th:field="*{sampleDesc}" rows="4"></textarea>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-offset-5 col-sm-10">
                <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i
                        class="fa fa-check"></i>保 存
                </button>&nbsp;
                <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i
                        class="fa fa-reply-all"></i>关 闭
                </button>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>
<th:block th:include="include :: bootstrap-select-js"/>
<th:block th:include="include :: jquery-cxselect-js"/>
<th:block th:include="include :: bootstrap-fileinput-js"/>
<th:block th:include="include :: bootstrap-typeahead-js"/>
<!--模板JS引入-->
<script th:src="@{/ajax/libs/template/template.js}"></script>
<!--拍照预览图片模板-->
<script type="text/html" id="template">
    <div class="file-preview-frame krajee-default  kv-preview-thumb file-preview-success"
         id={{id}} data-fileindex="0" data-fileid={{title}} data-template="image">
        <div class="kv-file-content">
            <img src={{src}} class="file-preview-image kv-preview-data" title={{title}}
                 style="width:213px;height:160px;" alt={{title}}>
        </div>
        <div class="file-thumbnail-footer">
            <div class="file-footer-caption" title={{title}}>
                <div class="file-caption-info">{{title}}</div>
                <div class="file-size-info"><samp></samp></div>
            </div>
            <div class="file-thumb-progress kv-hidden" style="display: block;">
                <div class="progress">
                    <div class="progress-bar bg-success progress-bar-success" role="progressbar" aria-valuenow="100"
                         aria-valuemin="0" aria-valuemax="100" style="width:100%;">
                        完成
                    </div>
                </div>
            </div>
            <div class="file-upload-indicator" title="上传"><i class="glyphicon glyphicon-ok-sign text-success"></i></div>
            <div class="file-actions">
                <div class="file-footer-buttons">
                    <button type="button" class="kv-file-upload btn btn-sm btn-kv btn-default btn-outline-secondary"
                            title="上传文件" style="display: none;"><i class="glyphicon glyphicon-upload"></i></button>
                    <button type="button" class="kv-file-remove btn btn-sm btn-kv btn-default btn-outline-secondary"
                            title="删除文件"><i class="glyphicon glyphicon-trash"></i></button>
                    <button type="button" class="kv-file-down btn btn-sm btn-default" title="下载附件"><i
                            class="fa fa-cloud-download"></i></button>
                </div>
            </div>

            <div class="clearfix"></div>
        </div>
    </div>
</script>
<script th:inline="javascript">
    var prefix = ctx + "publish/sample";
    $("#form-sample-edit").validate({
        focusCleanup: true
    });

    /*上传参数配置 name 属性值必须为file*/
    var fileConfig = {
        uploadUrl: '/common/upload',
        maxFileSize: 30000,
        browseClass: 'btn btn-primary',
        dropZoneTitle: "拖拽文件到这里",
    }
    /*循环加载页面上传组件*/
    $.each($(".file-upload"), function () {
        var nodeId = $(this).attr('id');
        $.common.uploadFileInput(fileConfig, $(this), "input[name='" + nodeId + "']");
    });

    /*高拍仪调用*/
    function photograph(parameter) {
        $.modal.open("拍照", ctx + "publish/identsample/indexOne?parameter=" + parameter, 1200);
    }
    /*高拍仪回调*/
    function photo(_base64, _parameter, arr) {
        console.log(arr);
        $.operate.post('/common/uploadBase64',
            {"base64": _base64},
            function (result) {
                if (result.code == web_status.SUCCESS) {
                    if ($("input[name='" + _parameter + "']").val() == null || $("input[name='" + _parameter + "']").val() == "") {
                        $("input[name='" + _parameter + "']").val(result.fileName);
                    } else {
                        $("input[name='" + _parameter + "']").val($("input[name='" + _parameter + "']").val() + ',' + result.fileName);
                    }
                    var id = new Date().getTime();
                    var title = result.fileName.substring(result.fileName.lastIndexOf("/") + 1);
                    var data = {
                        src: result.fileName,
                        arr: '0',
                        title: title,
                        id: id,
                    };

                    // 将数据放入模板中
                    var res = template("template", data);
                    $("input[name='" + _parameter + "']").next().find(".file-drop-zone-title").remove();
                    // 将模板放入页面中
                    $("input[name='" + _parameter + "']").next().find(".file-preview-thumbnails").append(res);
                    $("#" + _parameter).fileinput('_initFileActions');
                } else {
                    $.modal.alertError(result.msg);
                }
            }
        );
    }

    /*重新加载上传组件*/
    function reloadFileInput(_parameter) {
        var fileConfig = {
            uploadUrl: '/common/upload',
            maxFileSize: 30000,
            browseClass: 'btn btn-primary',
            dropZoneTitle: "拖拽文件到这里",
        }
        $.common.uploadFileInput(fileConfig, ("#" + _parameter), 'input[name="' + _parameter + '"]');
    }

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.saveTab(prefix + "/edit", $('#form-sample-edit').serialize());
        }
    }

    $("input[name='deliveryTime']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });

    var data = [
        {   //图书
            "s": [

            ],
            "v": "图书",
            "n": "图书"
        },
        {   //日报、周报、半月报、月报、双月报
            "s": [
                {"s": null, "v": "日报", "n": "日报"},
                {"s": null, "v": "周报", "n": "周报"},
                {"s": null, "v": "半月报", "n": "半月报"},
                {"s": null, "v": "月报", "n": "月报"},
                {"s": null, "v": "双月报", "n": "双月报"},
            ],
            "v": "公开报",
            "n": "公开报"
        },
        {   //周刊、旬刊、半月刊、月刊、双月刊、季刊
            "s": [
                {"s": null, "v": "周刊", "n": "周刊"},
                {"s": null, "v": "旬刊", "n": "旬刊"},
                {"s": null, "v": "半月刊", "n": "半月刊"},
                {"s": null, "v": "月刊", "n": "月刊"},
                {"s": null, "v": "双月刊", "n": "双月刊"},
                {"s": null, "v": "季刊", "n": "季刊"}
            ],
            "v": "期刊",
            "n": "期刊"
        },
        {   //日报、周一到周五、周二四六、周一三五、周二四、周二五、周二四五、周三六
            "s": [
                {"s": null, "v": "日报", "n": "日报"},
                {"s": null, "v": "周一到周五", "n": "周一到周五"},
                {"s": null, "v": "周二四六", "n": "周二四六"},
                {"s": null, "v": "周一三五", "n": "周一三五"},
                {"s": null, "v": "周二四", "n": "周二四"},
                {"s": null, "v": "周二五", "n": "周二五"},
                {"s": null, "v": "周二四五", "n": "周二四五"},
                {"s": null, "v": "周三六", "n": "周三六"}
            ],
            "v": "区县报",
            "n": "区县报"
        },
        {   //半月刊、月刊、双月刊、季刊
            "s": [
                {"s": null, "v": "半月刊", "n": "半月刊"},
                {"s": null, "v": "月刊", "n": "月刊"},
                {"s": null, "v": "双月刊", "n": "双月刊"},
                {"s": null, "v": "季刊", "n": "季刊"},
            ],
            "v": "内部资料",
            "n": "内部资料"
        }
    ];
    $('#element').cxSelect({
        selects: ['type', 'router'],
        jsonValue: 'v',
        data: data
    });

    /**
     * 其他按钮（如下载）绑定时间
     */
    $(document).on('click', '.kv-file-down', function (e, id, index) {
        var download = "";
        // 获取父级DIV
        debugger
        var fileIndex = $(this).parents(".file-preview-frame").attr("data-fileindex");
        var fileValue = $(this).parents(".col-sm-10").children("input").val();
        if(!isNaN(fileIndex)){
            var title = $(this).parents(".file-preview-frame").attr("title");
            var id = $(this).parents(".file-preview-frame").attr("id");
            if(title==""||title==null){
                title = $("#"+id+" img").attr("title");
                for(var i = 0 ;i<=fileValue.split(",").length-1;i++){
                    var title1 = fileValue.split(",")[i].substring(fileValue.split(",")[i].lastIndexOf("/")+1);
                    if(title1 == title ){
                        download =fileValue.split(",")[i];
                    }
                }
            }else{
                for(var i = 0 ;i<=fileValue.split(",").length-1;i++){
                    var title1 = fileValue.split(",")[i].substring(fileValue.split(",")[i].lastIndexOf("/")+1);
                    if(title1 == title ){
                        download =fileValue.split(",")[i];
                    }
                }
            }
        }else {
            var number = fileIndex.match(/\d/);
            if (number) {
                download = fileValue.split(",")[number];
            }
        }
        var name=download.substring(download.lastIndexOf("/")+1);
        if(download!=""){
            downloadFile(download,name);
        }
    })

    function downloadFile(url,name){
        var a = document.createElement("a");
        a.download = name;
        a.href = url;
        $("body").append(a); // 修复firefox中无法触发click
        a.click();
        $(a).remove();
    }
    // 部门补全
    $("#publisher").typeahead({
        source: function (query, process) {
            return $.ajax({
                url: '/publish/unit/list',
                type: 'post',
                data: {companyName: query, pageSize: 10, pageNum: 1, isAsc: 'asc', orderByColumn:''},
                success: function (result) {
                    var items =[];
                    var resultList = result.rows.map(function (item) {
                        var aItem = {id: item.id, name: item.companyName};
                        items.push(aItem);
                    });
                    return process(items);
                }
            });
        },
        afterSelect: function (item) {//选中一条数据后的回调函数，此处可以向隐藏域赋值数据id
            console.log(item);//取出选中项的值
            $("input[name='publisherId']").val(item.id);
        },
        delay: 800,
        fitToElement: true
    });



</script>
</body>
</html>